<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
		<title></title>
		<style type="text/css">
			html,body{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 100%;
				background: #f8f8f8;
			}
			.shopName{
				width: 80%;
				margin: 8vw 0;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.shopName img{
				width: 16vw;
				height: 16vw;
				margin-right: 3.2vw;
			}
			.shopName>div>div:nth-child(1){
				font-weight: bold;
				font-size: 4.8vw;
				margin-bottom: 3.2vw;
				color: #FF0000;
			}
			.shopName>div>div:nth-child(2){
				font-size: 3.6vw;
				color: #999999;
			}
			.ipt{
				width: 80%;
				height: 11vw;
				line-height: 11vw;
				border: none;
				text-indent: 2vw;
				border-radius: 1vw;
			}
			.ipt:focus{
				outline:none;
			}
			.hyqIpt{
				margin-top: 5vw;
				width: 82%;
				height: 10vw;
				line-height: 10vw;
				border: 1px solid #F2F2F2;
				border-radius: 1vw;
				text-indent: 2vw;
				color: #999999;
				font-size: 3.6vw;
			}
			.jbIpt{
				margin-top: 5vw;
				width: 82%;
				height: 10vw;
				line-height: 10vw;
				border-radius: 1vw;
				text-indent: 2vw;
				color: #999999;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				font-size: 3.6vw;
			}
			.jbIpt>div:nth-child(1){
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.scrollContent{
				width: 100%;
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: rgba(0,0,0,0.3);
			}
			.scrollDiv{
				width: 100%;
				height: 100vw;
				background: white;
				position: absolute;
				bottom: 0;
				border-radius: 2vw 2vw 0 0;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.scrollTit{
				color: #FF0000;
				padding: 3.6vw 0;
			}
			.scrollul{
				flex: 1;
				width: 100%;
				overflow:scroll;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.scrollList{
				width: 88%;
				padding: 3.6vw 2.8vw;
				border-radius: 1.5vw;
				display: flex;
				flex-direction: row;
				align-items: center;
				background: #FF0000;
				color: white;
				margin-bottom: 2vw;
			}
			.scrollList>div:nth-child(1){
				font-size: 6vw;
				margin-right: 2vw;
			}
			.scrollList>div:nth-child(2){
				font-size: 3.2vw;
			}
			.scrollBtn{
				width: 80%;
				height: 10vw;
				line-height: 10vw;
				background: #FF0000;
				color: white;
				text-align: center;
				border-radius: 50vw;
				font-size: 4vw;
				margin: 2vw 0;
			}
			.btn{
				background: #FF0000;
				color: white;
				width: 80%;
				text-align: center;
				padding: 2.6vw 0;
				font-size: 3.6vw;
				border-radius: 50vw;
				margin-top: 10vw;
			}
		</style>
	</head>
	<body>
		<div class="shopName">
			<img src="https://img.alicdn.com/bao/uploaded/i1/2372162717/O1CN01dOYfRl1VwQhR1yJly_!!2372162717.jpg_200x200q90.jpg_.webp" >
			<div>
				<div>煌华新纪元</div>
				<div>重庆市江北区观音桥2-1</div>
			</div>
		</div>
		<input class="ipt" type="number" placeholder="消费金额"/>
		<div class="hyqIpt">请选择优惠券</div>
		<div class="jbIpt">
			<div>使用金币抵扣<input type="checkbox" name="money" id="male1" value="1"/></div>
			<div>可用金币：200</div>
		</div>
		<div class="btn">支 付</div>
		<div class="scrollContent">
			<div class="scrollDiv">
				<div class="scrollTit">优惠券</div>
				<div class="scrollul">
					<div class="scrollList" data-txt='满399减19'>
						<div>￥19</div>
						<div>
							<div>满399使用</div>
							<div>有效期至2021.06.30 23:59</div>
						</div>
					</div>
					<div class="scrollList" data-txt='满399减50'>
						<div>￥50</div>
						<div>
							<div>满399使用</div>
							<div>有效期至2021.06.30 23:59</div>
						</div>
					</div>
					<div class="scrollList" data-txt='满399减119'>
						<div>￥119</div>
						<div>
							<div>满399使用</div>
							<div>有效期至2021.06.30 23:59</div>
						</div>
					</div>
				</div>
				<div class="scrollBtn">关闭</div>
			</div>
		</div>
		<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var yhq=2//优惠券如果为0，则不显示
				if(!yhq){
					$('.hyqIpt').hide()
				}
				
				
				$('.scrollContent').hide()//隐藏优惠券列表
				
				
				console.log('asdasd111')
				$('.hyqIpt').on('click',function(){//点击显示优惠券
					$('.scrollContent').show();
				})
				$('.scrollList').on('click',function(){//点击优惠券
					console.log('点击优惠券')
					$('.hyqIpt').html($(this).attr('data-txt'))
					$('.scrollContent').hide();
				})
				$('.scrollBtn').on('click',function(){//优惠券关闭按钮
					$('.scrollContent').hide();
				})
				$('.btn').on('click',function(){//确认按钮
					console.log($('input[name="money"]:checked').val())//选择金币抵扣的值
				})
			})
		</script>
	</body>
</html>
